<template>
  <section id="sort" class="clearfix">
    <div class="pull-left sorts">
      <span class="sort-item" :class="{'active': !oSort.filed}" @click="sort('')">默认排序</span>
      <span class="sort-item"
            :class="{'active': oSort.filed === 'minPrice', 'desc': oSort.sortStyle === 'Desc', 'asc': oSort.sortStyle === 'Asc'}"
            @click="sort('minPrice')">价格 <i class="icon icon-sort"></i></span>
      <!--<span class="sort-item"-->
            <!--:class="{'active': oSort.filed === 'pressDate', 'desc': oSort.sortStyle === 'Desc', 'asc': oSort.sortStyle === 'Asc'}"-->
            <!--@click="sort('pressDate')">发布时间 <i-->
        <!--class="icon icon-sort"></i></span>-->
    </div>

    <div class="pull-right">
      <div class="change-show pull-left">
        <div class="show-type pull-left">
          <span class="type" :class="{'active': type === 1}" @click="changeShowType(1)"><i
            class="icon grid"></i></span>
          <span class="type" :class="{'active': type === 2}" @click="changeShowType(2)"><i
            class="icon menu2"></i></span>
        </div>
      </div>

      <div class="pull-left search-page" v-if="totalPage > 0">
          <i class="prev icon icon-arrow-down-lg"
             :disabled="currentPage === 1"
             @click="changePage(-1)">
          </i>
          <input type="number" @blur="pageChange" @keyup.13="pageChange" v-model.lazy.number="page"> /{{totalPage}}<i :disabled="currentPage === totalPage"
             class="next icon icon-arrow-down-lg"
             @click="changePage(1)">
          </i>

      </div>
    </div>
  </section>
</template>

<script>
  export default {
    props: {
      /**
       * 排序对象
       */
      oSort: {
        type: Object,
        'default' () {
          return {
            filed: '',
            sortStyle: 'Desc'
          }
        }
      },

      currentPage: {
        type: Number,
        'default': 1
      },

      totalPage: {
        type: Number,
        'default': 0
      },

      /*
      * 商品显示方式
      * */
      showType: {
        type: Number,
        'default': 1
      }
    },
    data () {
      return {
        page: this.currentPage,
        type: this.showType || 1
      }
    },

    methods: {
      changeShowType (type) {
        this.type = type
        this.$emit('changeShowType', type)
      },

      //  手动改变页码
      pageChange () {
        this.page = (this.page > this.totalPage ? this.totalPage : this.page) < 1 ? 1 : this.page

        this.$emit('changePage', this.page)
      },

      //  上一页和下一页
      changePage (page) {
        this.$emit('changePage', this.page + page)
      },

      /**
       * 排序
       * @param filed  排序字段
       */
      sort (filed) {
        if (this.oSort.filed === filed) {
          this.oSort.sortStyle = this.oSort.sortStyle === 'Desc' ? 'Asc' : 'Desc'
        } else {
          this.oSort.filed = filed
          this.oSort.sortStyle = 'Desc'
        }

        this.$emit('sortChange', this.oSort)
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../../element-variables.scss";

  #sort {
    background-color: #f5f5f5;
    border: 1px solid #dedede;
  }

  %base {
    position: relative;
    top: -1px;
    &[disabled] {
      opacity: .4;
    }
    margin: 0 10px;
  }

  .prev {
    transform: rotate(90deg);

    @extend %base;
  }

  .next {
    transform: rotate(-90deg);
    @extend %base;
  }

  .sorts {
    .sort-item {
      padding: 0 32px;
      background-color: transparent;
      height: 44px;
      line-height: 44px;
      display: block;
      float: left;
      color: #6e6e6e;
      cursor: pointer;
      border: 1px solid #dedede;
      border-top: none;
      border-bottom: none;
      margin-left: -1px;

      &.active {
        background-color: #e8af68;
        color: #fff;
      }

      &.active.desc {
        .icon-sort {
          background-image: url("~assets/img/icons/sort-desc.png");
        }
      }

      &.active.asc {
        .icon-sort {
          background-image: url("~assets/img/icons/sort-asc.png");
        }
      }
    }
  }

  .change-show {
    .type {
      width: 44px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      display: block;
      float: left;
      cursor: pointer;
      border-left: 1px solid #dedede;

      &.active {
        background-color: #fff;
      }
    }
  }

  .show-type {

    .grid {
      background-image: url("~assets/img/icons/grid.png");
    }

    .menu2 {
      background-image: url("~assets/img/icons/menu2.png");
    }

    .active {
      .grid {
        background-image: url("~assets/img/icons/grid-colour.png");
      }

      .menu2 {
        background-image: url("~assets/img/icons/menu2-colour.png");
      }
    }
  }

  .search-page {
    border-left: 1px solid #dedede;
  }
</style>
